<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<form action="${pageContext.request.contextPath}/ajax/test1">

    用户名：<input type="text" id="username" name="username" onblur="judgeLogin()">
    密码：<input type="password" id="password" name="password" onblur="judgeLogin()">
    <p id="info"></p>
</form>
</body>

<script>
    function judgeLogin() {
        $.post(
            "${pageContext.request.contextPath}/ajax/test1",
            {"username": $("#username").val(), "password": $("#password").val()},
            function (data) {
                if(data === 'ok'){
                    // 使用.text()方法添加文字
                    $("#info").text(data);
                    // 使用.css()方法添加样式
                    $("#info").css({
                        "color": "green",    // 文字颜色为红色
                        "font-size": "16px", // 字体大小为16像素
                        "background-color": "yellow" // 背景颜色为黄色
                    });
                }
                else {
                    // 使用.text()方法添加文字
                    $("#info").text(data);
                    // 使用.css()方法添加样式
                    $("#info").css({
                        "color": "red",    // 文字颜色为红色
                        "font-size": "16px", // 字体大小为16像素
                        "background-color": "yellow" // 背景颜色为黄色
                    });
                }
            }
        )
    }
</script>
</html>
